import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const tabStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	selectors: {
		'&.outline': {
			border: `1px solid ${vars.color.border}`,
			backgroundColor: vars.color.baseBackground,
		},
	},
});

// HEADER
globalStyle(`${tabStyle}>div.head`, {
	display: 'flex',
	overflow: 'scroll',
	scrollbarWidth: 'none',
	position: 'relative',
});

globalStyle(`${tabStyle}>div.head.hidden`, {
	display: 'none',
});

// globalStyle(`${tabStyle}>div.head.menu`, {
// 	paddingRight: '3em',
// });

globalStyle(`${tabStyle}.outline>div.head`, {
	backgroundColor: vars.color.pageBackground,
});

globalStyle(`${tabStyle}.outline>div.head:before`, {
	content: ' ',
	display: 'block',
	width: '0.5em',
	borderBottom: `1px solid ${vars.color.border}`,
});
globalStyle(`${tabStyle}.outline>div.head::after`, {
	content: ' ',
	display: 'block',
	flex: '1',
	borderBottom: `1px solid ${vars.color.border}`,
});

globalStyle(`${tabStyle}>div.head>button`, {
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
	justifyContent: 'center',
	padding: '0.6em 1em',
	cursor: 'pointer',
	whiteSpace: 'nowrap',
	userSelect: 'none',
	border: 'none',
	borderBottom: `4px solid transparent`,
	backgroundColor: 'transparent',
	color: vars.color.secondaryText,
	fill: vars.color.secondaryText,
	outline: 'none',
	fontSize: '1rem',
	fontWeight: 'bold',
});

globalStyle(`${tabStyle}>div.head>button>svg`, {
	width: '1.8em',
	height: '1.5em',
});

globalStyle(`${tabStyle}>div.head>button>svg[name=close] path`, {
	pointerEvents: 'none',
});

globalStyle(`${tabStyle}>div.head>button>svg[name=close]`, {
	position: 'relative',
	width: '1.5em',
	height: '1.5em',
	padding: '0.2em',
	left: '0.5em',
	fill: vars.color.placeholderText,
});
globalStyle(`${tabStyle}>div.head>button>svg[name=close]:hover`, {
	backgroundColor: vars.color.brandLight,
});

globalStyle(`${tabStyle}:not(.outline)>div.head>button`, {
	transition: 'color 0.5s, fill 0.5s, border-color 0.5s',
});

globalStyle(`${tabStyle}>div.head>button:not(.disable):focus`, {
	// backgroundColor: vars.color.activeFocus,
	color: vars.color.brand,
});
globalStyle(`${tabStyle}>div.head>button.disable`, {
	color: vars.color.disabledText,
	fill: vars.color.disabledText,
	cursor: 'default',
});
globalStyle(`${tabStyle}>div.head>button.active`, {
	borderBottomColor: vars.color.brand,
	color: vars.color.brand,
	fill: vars.color.brand,
});
globalStyle(`${tabStyle}.outline>div.head>button`, {
	borderLeft: `1px solid transparent`,
	borderRight: `1px solid transparent`,
	borderBottom: `1px solid ${vars.color.border}`,
});
globalStyle(`${tabStyle}.outline>div.head>button.active`, {
	backgroundColor: vars.color.baseBackground,
	borderColor: vars.color.border,
	borderBottom: `1px solid ${vars.color.baseBackground}`,
	// boxShadow: `0px 0px 4px ${vars.color.shadow}`,
	zIndex: 1,
});

globalStyle(`${tabStyle}>div.head>button.menu`, {
	position: 'sticky',
	right: 0,
	width: '3em',
	padding: '0.5em',
	backgroundColor: vars.color.pageBackground,
	boxShadow: `0 0 10px ${vars.color.shadow}`,
	zIndex: 2,
});

globalStyle(`${tabStyle}.outline>div.head>button.menu`, {
	borderLeft: `1px solid ${vars.color.border}`,
});

globalStyle(`${tabStyle}>div.head>button.menu:hover,${tabStyle}>div.head>button.menu:focus`, {
	backgroundColor: vars.color.pageBackground,
});

globalStyle(`${tabStyle}>div.body`, {
	display: 'flex',
	flexDirection: 'column',
	padding: '0.8em',
	height: 0,
	flex: 1,
	overflow: 'auto',
});

globalStyle(`${tabStyle}>div.body>*:not(.active)`, {
	display: 'none !important',
});
